<template>
	<view>
		<view class="row" style=" border-bottom: 1px solid #e3e3e3 !important;">
			<view style="position:absolute;margin-top: 8px;margin-left: 93%;" @tap="changimg()">
				<image :src="newsrc" class="item-icon" mode=""></image>
			</view>
			<input v-model="currhref" type="text" placeholder="" />
		</view>
		<view class="downclass" :style="{'display': dwonFlag ? 'block' : 'none'}">
				<view class="" v-for="(item, index) in list" :key="index">
					<view class="row" @tap="itemClick($event)" :data-Id="item.url"
					style=" border-bottom: 1px solid #e3e3e3 !important;font-size: 30rpx;padding-left: 15rpx;">
						<view>
							{{item.name}}&nbsp;&nbsp;:&nbsp;&nbsp;{{item.url}}
						</view>
					</view>
					
				</view>
			
		</view>
		<view class="btg">
			<button type="primary" @tap="btn">确认</button>
		</view>
	</view>
</template>

<script>
	var self;
	export default {
		
		data() {
			return {
				currhref:"http://43.240.124.27:7924",
				newsrc:"../../static/images/icon-href-down.png",
				dwonFlag:false,
				list:[{name:"服务器",url:"http://43.240.124.27:7924"},{name:"服务器",url:"http://localhost:8015"}],
			}
		},
		onLoad(options) {
			this.currhref=uni.getStorageSync("localurl");
			},
		methods: {
			btn() {
				if (this.currhref.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入服务器地址'
					});
					return;
				}else{
					uni.setStorage({
						key: 'localurl',
						data: this.currhref
					});
					uni.navigateBack({
						url: '../login/login',
					})
				}				
			},
			changimg(){
				self=this;
				this.dwonFlag=!this.dwonFlag;
				if(this.dwonFlag){
					self.newsrc="../../static/images/icon-href-up.png"
				}
			},
			itemClick(e){
				self=this;
				//console.log(e.currentTarget.dataset.id);
				self.currhref=e.currentTarget.dataset.id;
				self.dwonFlag=false;
			},
			refresh(){
				location.reload();
			}
		}
	}
</script>

<style>
	.item-icon {
		width: 40upx;
		height: 40upx;
	}
.row {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		padding-bottom: 25rpx;
		background-color: #ffffff;
		margin-bottom: 10px;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.row input {
		width: 90%;
		height: 50rpx;
		min-height: 50rpx;
		padding: 15rpx 0;
		padding-left: 0px;
		padding-right: 30px;
		line-height: 30px;
	}
	
	.row .title {
		width: 30%;
		height: 25px;
		min-height: 25px;
		padding: 15px 0;
		padding-left: 30px;
		line-height: 25px;
		
	}
	.btg {
		margin-top: 30px;
	}
	.btg button{
		background-color:#32cacb !important;
		margin-top: 20px;
		margin: 0 10px;
	}
	.downclass{
		position:absolute;z-index: 999;width: 100%;background-color: #FFFFFF;
	}
</style>
